<template>
  <div class="productList">
    <el-button @click="showDialog" class="chooseProduct">选择产品</el-button>
    <el-dialog title="产品列表" v-model="show" size="large" :close-on-click-modal="false">
      <el-col :span="6" :offset="18" class="searchBox">
        <el-input placeholder="请选择产品" icon="search" v-model.trim="search" @change="searchCoupon">
        </el-input>
      </el-col>
      <el-row>
        <el-table height="400" ref="multipleTable" :data="productShow"  tooltip-effect="dark" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="产品名称" width="150"></el-table-column>
          <el-table-column prop="issuerName" label="发行方" width="150"></el-table-column>
          <el-table-column prop="account" label="募集额度" show-overflow-tooltip></el-table-column>
          <el-table-column prop="payedAccount" label="已付款金额" show-overflow-tooltip></el-table-column>
          <el-table-column prop="prodStatus" label="上/下架状态" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-row>
      <el-button @click="submit($event)" :disabled="forbid" class="buttonStep">提交</el-button>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: ['products'],
    data () {
      return {
        forbid: false,
        search: '', //搜索框输入
        productList: [], //产品列表
        multipleSelection: [], //选中产品的信息列表
        productShow: [],
        show: false
      }
    },
    created () {
      this.$http.get('/api-active/v1/api/product/list')
        .then((response) => {
          let data = response.body;
          this.productList = data.result;
          this.productShow = this.productList;
        })
    },
    watch: {
      products (val, oldval) {
        this.handleSelectionChange(val)
        this.multipleSelection = val;
      }
    },
    methods: {
      showDialog () {
          this.show = true;
          this.forbid = false;
        },
      //搜索产品
      searchCoupon () {
        let arr = [];
        let str = this.search;
        for (let key in this.productList) {
          if (this.productList[key].name.indexOf(str) >= 0) {
            arr.push(this.productList[key]);
          }
        }
        this.productShow = arr;
      },
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      submit () {
        if (this.multipleSelection.length == 0) {
          this.$alert('请选择产品', '提示');
        } else{
          this.forbid = true;
          //传一个产品信息，和一个产品id
          this.$emit('getProduct', this.multipleSelection);
          this.$refs.multipleTable.clearSelection();
          this.show = false;
        }
      }
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
  .productList{
    //表格样式
    .el-table{
      th {
        background: #fff;
        .cell {
          font-size: 0.875rem;
          min-height:2.5rem;
          line-height:2.5rem;
          padding-left: 3px;
          padding-right: 3px;
          background: #fff;
        }
      }
      .el-table__body{
        color:#666666;
        overflow-y: auto;
        .cell{
          font-size: 0.875rem;
          padding-left:3px;
          padding-right:3px;
        }
      }

      .el-button--text{
        color:@greenStyle;
        margin:0 5px;
      }
      .el-button--small{
        font-size: 0.875rem;
      }
      .is-disabled{
        color:#bfcbd9;
      }
    }
    .buttonStep{
      margin-top:20px;
    }
    .searchBox{
      position: absolute;
      top: 10px;
      right:50px;
    }
    .chooseProduct{
      float: left;
      font-size:0.9rem;
      &:hover{
        border-color:@greenStyle;
        color:@greenStyle;
      }
    }
  }
</style>

